<template>
  <!-- 组件根标签 -->
  <div class="scls">
    <div class="top" @click="toDetail(item.art_id)">
      <div class="one" v-if="item.cover.type === 1">
        <div class="left">
          <p>
            {{ item.title }}
          </p>
          <div class="xiao">
            <span class="heim"> {{ item.aut_name }}</span>
            <span class="commont">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | mydayjstime }}</span>
          </div>
        </div>
        <div class="right">
          <img
            :src="item"
            v-for="(item, index) in item.cover.images"
            :key="index"
            alt=""
          />
        </div>
      </div>
      <div class="zero" v-if="item.cover.type === 0">
        <div class="left">
          <p>
            {{ item.title }}
          </p>
          <div class="xiao">
            <span class="heim"> {{ item.aut_name }}</span>
            <span class="commont">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | mydayjstime }}</span>
          </div>
        </div>
      </div>
      <div class="three" v-if="item.cover.type === 3">
        <div class="left">
          <p>
            {{ item.title }}
          </p>
          <div class="imges">
            <img
              :src="item"
              v-for="(item, index) in item.cover.images"
              :key="index"
              alt=""
            />
          </div>
          <div class="xiao">
            <span class="heim"> {{ item.aut_name }}</span>
            <span class="commont">{{ item.comm_count }}评论</span>
            <span class="time">{{ item.pubdate | mydayjstime }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="item" @click="option(item.art_id)">
        <van-icon name="setting-o" />
        <span>操作</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['item'],
  name: 'xinwen',
  data () {
    return {
      show: false,
      // 图片数量测试用的
      num: 3,
      // 图片的数量的数据
      picnums: ''
    }
  },
  methods: {
    // 将设置标签提交到父组件中的事件中使用
    option (autid) {
      this.$emit('option', autid)
    },
    // 文章点赞,向父组件中提供事件
    star (id) {
      this.$emit('star', id)
    },
    // 评论文章,向父组件中提供事件
    comment (id) {
      this.$emit('comment', id)
    },
    // 跳转到详情页面,给父组件提供个事件
    toDetail (id) {
      this.$emit('toDetail', id)
    }
  },
  components: {}
}
</script>
<style lang="less" scoped>
.scls {
  margin-bottom: 10px;
  background-color: white;
  .top {
    .one {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      height: 102px;
      .left {
        p {
          font-size: 18px;
          margin-bottom: 15px;
          line-height: 25px;
          //两行
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .xiao {
          font-size: 12px;
          color: #ccc;
          .commont {
            margin-right: 10px;
          }
          .heim {
            margin-right: 10px;
          }
          .time {
          }
        }
      }
      .right {
        img {
          width: 116px;
          height: 73px;
        }
      }
    }
    .zero {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      height: 102px;
      .left {
        p {
          font-size: 18px;
          margin-bottom: 15px;
          line-height: 25px;
          //两行
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .xiao {
          font-size: 12px;
          color: #ccc;
          .commont {
            margin-right: 10px;
          }
          .heim {
            margin-right: 10px;
          }
          .time {
          }
        }
      }
    }
    .three {
      padding: 10px;

      font-size: 20px;
      .left {
        p {
          font-size: 18px;
          margin-bottom: 15px;
          line-height: 25px;
          //两行
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .xiao {
          font-size: 12px;
          color: #ccc;
          .commont {
            margin-right: 10px;
          }
          .heim {
            margin-right: 10px;
          }
          .time {
          }
        }
      }
      .imges {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        img {
          width: 116px;
          height: 73px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #f5f5f5;

    .item {
      display: flex;
      align-items: center;
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      height: 20px;
      padding-right: 20px;
      padding-bottom: 20px;

      span {
      }
    }
  }
}
</style>
